<template>
  <div class="warp">
    

    <MinCard
      v-for="item in detalData"
      :text="item.category_name"
      :id="item.id"
      :img="item.cover"
      to="to"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import MinCard from "../../components/card/minCard.vue";
import * as Local from "../../components/Cache";
import { getAllChaneels } from "../../axios/api/Allapi";
// const { proxy } = getCurrentInstance();

const detalData = ref();
/**
 * @param stary 判断是否有缓存 如果有就调用缓存-取消请求
 */

function start() {
  const cachedata = Local.getData("detalData");

  if (cachedata.length > 1) {
    console.log("有缓存");
    console.log("cachedata", cachedata);
    detalData.value = cachedata;
    return;
  }
  console.log("没有缓存");

  async function y() {
    return await getAllChaneels().then((res) => {
      detalData.value = res;
    });
  }
  y();
}
start();
</script>

<style >
.warp {
  width: 600px;
  height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>